<template>
    <!--个人资料-->
    <div class="contain">
        <div class="clo-box">
            <div class="clo-contain">
                <!--顶部三栏统计-->
                <div class="overview-box">
                    <div class="view study">
                        <div class="title">
                            <span>学习评估</span>
                            <i class="arrow-right"></i>
                        </div>
                        <div class="summery-box">
                            <div class="summery-num">
                                <span class="num">99</span>
                                <p>已学课程</p>
                            </div>
                            <div class="summery-detail">
                                <div class="detail">
                                    <span class="detail-label">知识点总数</span>
                                    <span class="detail-value">14个</span>
                                </div>
                                <div class="detail">
                                    <span class="detail-label">已学习</span>
                                    <span class="detail-value">7个</span>
                                </div>
                                <div class="detail">
                                    <span class="detail-label">已掌握</span>
                                    <span class="detail-value">4个</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="view question">
                        <div class="title">
                            <span>题库</span>
                            <i class="arrow-right"></i>
                        </div>
                        <div class="summery-box">
                            <div class="summery-num">
                                <span class="num">14</span>
                                <p>今日答题数量</p>
                            </div>
                            <div class="summery-detail">
                                <div class="detail">
                                    <span class="detail-label">知识点总数</span>
                                    <span class="detail-value">1个</span>
                                </div>
                                <div class="detail">
                                    <span class="detail-label">正确率</span>
                                    <span class="detail-value">69%</span>
                                </div>
                                <div class="detail">
                                    <span class="detail-label">错题</span>
                                    <span class="detail-value">3个</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="view answer">
                        <div class="title">
                            <span>答疑</span>
                            <i class="arrow-right"></i>
                        </div>
                        <div class="summery-box">
                            <div class="summery-num">
                                <span class="num">99</span>
                                <p>最新答疑</p>
                            </div>
                            <div class="summery-detail">
                                <div class="detail">
                                    <span class="detail-label">答疑</span>
                                    <span class="detail-value">8条</span>
                                </div>
                                <div class="detail">
                                    <span class="detail-label">已回复</span>
                                    <span class="detail-value">4条</span>
                                </div>
                                <div class="detail">
                                    <span class="detail-label">未回复</span>
                                    <span class="detail-value">1条</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--今日直播-->
                <userLiveOverview></userLiveOverview>
                <!--我的课程-->
                <userClassOverview></userClassOverview>
            </div>
            <div class="right">
                <div class="messge-box">
                    <div class="tab-box">
                        <nav>课程学习</nav>
                        <nav>互动消息</nav>
                        <nav>活动消息</nav>
                        <nav>系统消息</nav>
                    </div>
                    <ul class="message-list">
                        <li class="nodata">
                            暂无消息
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <copyright></copyright>
    </div>
</template>
<script>
    import userLiveOverview from  './userLiveOverview.vue'
    import userClassOverview from './userClassOverview.vue'
    import copyright from '../../../components/copyright.vue'

export default {
    name: 'overview',
    components: {
        userLiveOverview,
        userClassOverview,
        copyright
    },
    data() {
        return {
            account: ''
        };
    },
    watch: {
        /**/
    },
    mounted() {
        this.getTestList()
    },
    methods: {
        getTestList() {
            return this.$api.ajaxData({
                pathName: 'doGetTestLogList',
                authorization: true,
                errorFunc: false,
//                method: 'post',
//                data: {
//                    test_type: this.test_type || '',
//                    course_id: this.course.id
//                }
            }).then(res =>{
                console.log(res)
            }).catch(()=> {
            });
        },
    }
};
</script>
<style scoped lang="scss">
.contain {
    .clo-box {
        display: flex;
        .clo-contain {
            flex: 1;
            .overview-box {
                display: flex;
                margin-bottom: 10px;
                background: #fff;
                border: 1px solid #f7f7f7;
                .view {
                    flex: 1;
                    padding: 20px 0 10px;
                    &:not(last-child) {
                        border-right: 1px solid #f7f7f7;
                    }
                    .title {
                        padding: 0 15px;
                        font-size: 16px;
                        font-weight: bold;
                        .arrow-right {
                            display: block;
                            float: right;
                            width: 11px;
                            height: 11px;
                            background: url('../../../assets/image/icon/u2069.png') no-repeat;
                            background-size: contain;
                            cursor: pointer;
                        }
                    }
                    .summery-box {
                        display: flex;
                        .summery-num {
                            flex: 1 2;
                            height: 90px;
                            width: 150px;
                            padding: 30px 0;
                            color: #FF6A00;
                            text-align: center;
                            box-sizing: border-box;
                            border-right: 1px solid #f7f7f7;
                            .num {
                                display: block;
                                font-size: 36px;
                                line-height: 28px;
                                margin-bottom: 10px;
                            }
                        }
                        .summery-detail {
                            flex: 1 0;
                            padding: 0 10px;
                            font-size: 12px;
                            color: #999;
                            .detail {
                                display: flex;
                                line-height: 24px;
                                &:not(last-child) {
                                    margin-bottom: 10px;
                                }
                                .detail-label {
                                    width: 72px;
                                }
                                .detail-value {
                                    color: #FF6A00;
                                }
                            }
                        }
                    }
                }
            }
        }
        .right {
            flex: 1 1 300px;
            max-width: 300px;
            min-width: 200px;
            margin-left: 15px;
            .messge-box {
                background: #fff;
                border: 1px solid #f7f7f7;
                .tab-box {
                    display: flex;
                    font-size: 12px;
                    color: #333;
                    font-weight: bold;
                    border-bottom: 1px solid #f7f7f7;
                    nav {
                        display: block;
                        height: 40px;
                        padding: 0 10px;
                        line-height: 40px;
                        flex: 1;
                        text-align: center;
                        white-space: nowrap;
                        &:not(last-child) {
                            border-right: 1px solid #f7f7f7;
                        }
                    }
                }
                .message-list {
                    font-size: 12px;
                    color: #333;
                    li {
                        padding: 0 15px;
                        line-height: 40px;
                        &.nodata {
                            text-align: center;
                        }
                    }
                }
            }
        }
    }


}
</style>
